import { getTownList } from "@/api/country.js";
export default {
  data() {
    return {
      town: "",
      areaShow: false,
      iscityshow: true,
      cityChildren: [],
      chooseshow: true,
      currentareaindex: "",
      currentLiindex: "",
      currentTown: "",
      istownshow: false,
      townlist: [],
      city: "",
      country: "",
    }
  },
  mounted() {
    this.nowuserarea = this.$store.getters.user.area;
    if (this.nowuserarea == "") {
      this.iscityshow = true;
    } else {
      let list = this.nowuserarea.split("-");
      this.city = list[0];
      if (list.length == 1) {
        this.iscityshow = false;
        this.areaShow = true;

        this.citylist.forEach((element, i) => {
          if (element.label == this.city) {
            this.currentLiindex = i;
          }
        });
        this.createAreaList();
      } else if (list.length == 2) {
        this.iscityshow = false;
        this.areaShow = false;
        this.istownshow = true;
        getTownList({
          city: list[0],
          country: list[1],
        }).then((res) => {
          this.townlist = res.data
        })
      }
    }
  },
  methods: {
     //懒加载
     lazyLoad(node, resolve) {
      let level = node.level;
      if (level == 2) {
        let country = node.label;
        let city = node.parent.label;
        getTownList({
          city: city,
          country: country,
        }).then((res) => {
          let nodes = [];
          let promiseArrary = [];
          res.data.map((v, i) => {
            let n = {
              id: i,
              label: v,
              value: v,
              children: [],
            };
            let promise = getAllVillageList({
              city: city,
              country: country,
              town: v,
            }).then((response) => {
              return response;
            });
            promiseArrary.push(promise);
            nodes.push(n);
          });
          Promise.all(promiseArrary).then((dataArr) => {
            nodes.forEach((v, i) => {
              let data = dataArr[i];
              v.children = data.data.map((item, index) => {
                return {
                  id: index,
                  label: item[1],
                  value: item[0],
                  leaf: true,
                };
              });
            });
            resolve(nodes);
          });
        });
      } else {
        resolve(node);
      }
    },
     //进度条颜色
     customColorMethod(percentage) {
      if (percentage < 30) {
        return "#0000CD";
      } else if (percentage < 70) {
        return "#e6a23c";
      } else {
        return "#67c23a";
      }
    },

    format(percentage) {
      return `${percentage}%`;
    },
    valueChange() {
      this.listquery.currentPage = 1
      this.getdata()
    },
    cityclear() {
      this.listquery.city = "";
      this.listquery.currentPage = 1
      this.areaShow = false;
      this.istownshow = false

      this.getdata();
    },
    cityChange(e) {
      this.listquery.country = ""
      this.listquery.town = ""
      if (e == 0) {
        this.areaShow = false;
        this.istownshow = false
        this.listquery.city = ""

        this.getdata()
      } else {
        this.city = this.citylist[this.currentLiindex].label;
        this.areaShow = true;
        this.createAreaList();
        if (this.country != "") {
          this.country = ""
          this.listquery.country = ""
        }
        this.istownshow = false
        this.currentareaindex = 0;
        this.listquery.city = this.city;
        this.listquery.currentPage = 1
        this.getdata();
      }


    },
    createAreaList() {
      const children = this.citylist[this.currentLiindex];
      if (children && children.children) {
        this.cityChildren = children.children.concat([]);
        let labelvalue = { label: children.label };
        this.cityChildren.unshift(labelvalue);
      } else {
        this.city = ""
      }
    },
    liChange(index) {
      this.currentareaindex = index;
      if (index == 0) {
        this.country = null;
        this.istownshow = false
      } else {
        this.country = this.cityChildren[index].label;
        this.city = this.citylist[this.currentLiindex].label;

        this.istownshow = true
      }
      this.listquery.city = this.city;
      this.listquery.country = this.country;
      this.listquery.currentPage = 1
      if (this.town != "") {
        this.town = ""
        this.listquery.town = ""
      }
      getTownList({
        city: this.city,
        country: this.country,
      }).then((res) => {
        this.townlist = res.data

      })
      this.getdata();
    },
    townChange() {
      this.listquery.town = this.town;
      this.listquery.currentPage = 1
      this.getdata();
    }
  }

}